<template>
	<view class="main">
		<header-vue :back="true"  bgColor="transparent"></header-vue>
		<view class="top-box-style">
			<view class="prd-img">
				<image :src="IMAGE_URL+ '/static/images/user/prd-img.png'"></image>
			</view>
			<view class="px-32rpx py-28rpx">
				<view class="text-333333 fz-28 mb-40rpx">五得利中筋面粉10斤</view>
				<view class="d-flex align-items-center justify-content-between">
					<view class="fz-36 text-FF4141">50积分</view>
					<view class="fz-24 text-999999">库存:100</view>
				</view>
			</view>
			<view class="line-box"></view>
		</view>
		<view class="top-position"></view>
		<view class="w-100 padding80">
			<view class="px-32rpx py-28rpx ">
				<view class="text-333333 fz-32 mb-20rpx">商品详情</view>
				<view class="text-666666 fz-24 text-wrap mb-20rpx">五得利面粉采用优质的小麦产区，土地肥沃，水分养分充足</view>
				<view class="points-prd-img">
					<image  :src="IMAGE_URL+ '/static/images/user/prd-des-img.png'"></image>
				</view>
			</view>
		</view>
	
		<view class="btn-box">
			<view class="d-flex justify-content-between align-content-center">
				<view>
					<view class="text-FF4141 fz-36">50积分</view><view class="text-999999 fz-20">当前积分100</view>
				</view>
				<view class="btn btn-fail" @click="toExchange">立即兑换</view>
				<!-- 积分不足 -->
			</view>
		</view>
		<u-popup :show="exchangeShow" mode="center" @close="exchangeShow = false" :round="28">
			<!-- <view class="price-tip" :style="backgroundImage: 'url(' + IMAGE_URL + '/static/images/user/popup-bg.png')"> -->
			 <view class="price-tip" style="backgroundImage: url( '/static/images/user/popup-bg.png')">
				<view class="flex between position-relative">
					<view class="font32 tip-name">确认兑换</view>
					<i class="iconfont icon-close font32" @click="exchangeShow=false"></i>
				</view>
				
				<view class="popup-tip2 text-333333 fz-28 pt-40rpx px-24rpx mb-60rpx">
					<view class="pt-10rpx mb-10rpx">兑换商品:五得利中筋面粉10斤</view>
					<view class="pt-10rpx mb-10rpx">消耗积分:50</view>
					<view class="pt-10rpx mb-10rpx text-wrap">取件地址:雄安新区华望城物业中心</view>
				</view>
				<view class="popup-btn" @click="exchange">确认</view>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
	import headerVue from '@/components/header.vue'
	import appConfig from '@/config/app.js'
	export default {
		data() {
			return {
				exchangeShow:false,
				IMAGE_URL: appConfig.IMAGE_URL,
			}
		},
		components: {
			headerVue,
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			toPointList(){
				uni.navigateTo({
					url:'/views-user/points/points-list'
				})
			},
			toDetial(){
				uni.navigateTo({
					url:'/views-user/points/points-detail'
				})
			},
			toExchange(){
				this.exchangeShow = true
				
			},
			exchange(){
				this.exchangeShow = false
				uni.navigateTo({
					url:'/views-user/points/complete'
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import url("../../common/public.scss");
	.main {
		width: 100%;
		//height: 100vh;
	}
	.top-box-style{
		position: absolute;
		top:0;
		z-index: -1;
		width: 100%;
	}
	.top-position{
		height: 744rpx;
		width: 100%;
	}
	.prd-img{
		width: 100%;
		height: 640rpx;
		margin-bottom: 28rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.text-FF4141{
		color:#FF4141;
	}
	.line-box{
		height: 20rpx;
		background: #F6F6F6;
	}
	.points-prd-img{
		
		// height: 690rpx;
		width: 974rpx;
		image{
			width: 690rpx;
			height: 974rpx;
		}
	}
	.padding80{
		padding-bottom: 80rpx;
	}
	.btn-box{
		position: fixed;
		bottom: 0;
		padding: 6rpx 48rpx;
		background: #ffffff;
		width: 100%;
		box-sizing: border-box;
		height: 90rpx;
		.btn{
			width: 480rpx;
			height: 76rpx;
			background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
			border-radius: 60rpx;
			text-align: center;
			line-height: 76rpx;
			
			color:ffffff;
		}
		.btn-fail{
			background: #999999;
		}
	}

	.price-tip{
		width: 640rpx;
		background: #FFFFFF;
		padding:  40rpx 40rpx;
		box-sizing: border-box;
		//height: 460rpx;
	
		background-size: 100%;
		background-repeat: no-repeat;
		border-radius: 28rpx;
	
		
		.iconfont-position{
			justify-content: flex-end;
		}
		.tip-name{
			color:$uni-text-color;
			font-weight: bold;
			text-align: center;
			width: 100%;
		}
		.icon-close{
			position: absolute;
			right:0;
			top:0;
		}
		
		.tip-price{
			color:#FF3737;
		}
		.tip-text{
			margin-top: 24rpx;
			color:$uni-text-color-grey;
		}
	
		.popup-tip2{
		
			box-sizing: border;
		}
		
		.popup-btn{
			//width: 560px;
			height: 76rpx;
			line-height: 76rpx;
			background: $uni-color-primary;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(7,133,207,0.16);
			border-radius: 60rpx;
			color:$uni-text-color-inverse;
			text-align: center;
		
		}
	}
</style>